<template>
  <div class="topic-group-list">
    <el-card class="uniformMargin">
      <!-- 搜索 -->
      <el-form>
        <el-row type="flex" justify="space-between">
          <!-- search -->
          <el-col>
            <el-form-item label="关键字" label-width="70px">
              <el-input
                style="width: 200px"
                v-model="pageForm.keyword"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-row type="flex" justify="end">
              <!-- button -->
              <el-button size="small" @click="clearSearch">清除</el-button>
              <el-button type="primary" size="small" @click="searchKeyword"
                >搜索</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <!-- 提示 -->
      <el-alert type="info" show-icon :closable="false">
        <span slot="title">数据一共{{ total }}条</span>
      </el-alert>

      <!-- 表格 -->
      <div>
      <el-table class="table" :data="items" style="width: 100%" v-loading="loading">
        <el-table-column label="编号" width="200" align="center" prop="id">
        </el-table-column>
        <el-table-column label="题型" width="50">
          <template v-slot="{ row }">
            <span v-if="row.questionType === '1'">单选</span>
            <span v-else-if="row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" prop="id">
          <template v-slot="{ row }">
            <div
              @click="showDetails(item.id)"
              class="questionsNum"
              v-for="(item, index) in row.questionIDs"
              :key="index"
            >
              {{ item.number }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addTime" />
        <el-table-column label="答题时间(s)" prop="totalSeconds" />
        <el-table-column label="正确率(%)" prop="accuracyRate" />
        <el-table-column label="录入人" align="center" prop="userName" />
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="removeItem(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>

      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[20, 40, 60, 80]"
          :current-page.sync="pageForm.page"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>

  <!-- 预览组件 -->
  <questions-preview  :showDetailsDialog.sync="showDetailsDialog" :basicQuestionBank="basicQuestionBank"/>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions.js'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  name: 'TopicGroupList',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      // 查询参数
      pageForm: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      basicQuestionBank: {},
      items: [],
      total: 0,
      // 预览弹出层
      showDetailsDialog: false
    }
  },
  created () {
    this.getGroupList()
  },

  methods: {
    // 获取组题列表
    async getGroupList () {
      this.loading = true
      const { data } = await randoms(this.pageForm)
      this.items = data.items
      this.total = data.counts
      this.loading = false
    },
    // 搜索
    searchKeyword () {
      this.pageForm.page = 1
      this.getGroupList()
      console.log(this.pageForm.page)
    },
    // 清空搜索框
    clearSearch () {
      this.pageForm.keyword = ''
      this.getGroupList()
    },
    // 显示题组详情
    async showDetails (id) {
      this.showDetailsDialog = true
      const { data } = await detail({ id })
      this.basicQuestionBank = data
    },
    // 表单删除
    removeItem (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async val => {
          await removeRandoms({ id })
          this.getGroupList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    // 分页选择每页条数
    handleSizeChange (val) {
      this.pageForm.pagesize = val
      if (this.pageForm.page === 1) {
        this.getGroupList(this.pageForm)
      }
    },
    handleCurrentChange (val) {
      this.pageForm.page = val
      this.getGroupList()
    }

  }
}
</script>

<style scoped lang="scss">
.uniformMargin{
  margin: 10px;
}
.table {
  margin: 10px 0 20px 0;
}
.questionsNum {
  color: rgb(0, 174, 255);
  cursor: pointer;
}
</style>
